<template>
	<view :class="['scroll-y', zClass]">
		<scroll-view scroll-y class="scroll-y-view">
			<view
				v-for="(v,i) in items" :key="i"
				:class="['item', value==i?'active':'']"
				@click="onChange(i)">
				{{v.name}}
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default{
		props: {
			'zClass':{type:String},
			'items':{type:Array},
			'value':{type:Number}
		},
		methods:{
			onChange(i){
				this.$emit('input', i)
			}
		}
	}
</script>

<style lang="scss">
	.scroll-y{
		background-color: #f9f9f9;
		height: 100%;
		.scroll-y-view{
			height: 100%;
		}
		.item{
			padding: 26upx;
			&.active{
				background: #fff;
				border-left: solid 4upx $primary-color;
				color: $primary-color;
			}
		}
	}
</style>
